<template>
	<view class="cF" v-show="show">
		<view class="ticket-details mainpadding mainbgc">
			<!-- 等待卖家付款：-->
			<view class="" v-if="dataAll.checkinfo==1">
				<view class="ticketDetailsTitle">等待买家付款</view>
				<view class="surplusTime">剩余{{dataAll.itemend}}自动关闭</view>
			</view>
			<!-- 等待领取：-->
			<view class="" v-if="dataAll.checkinfo==2">
				<view class="ticketDetailsTitle">等待核销</view>
				<view class="surplusTime">请您到店出示核销码进行核销！</view>
			</view>
			<!-- 已完成：-->
			<view class="" v-if="dataAll.checkinfo==3">
				<view class="ticketDetailsTitle">已完成</view>
				<view class="surplusTime">感谢您的支持，期待您的下次到来！</view>
			</view>
			<!-- <view class="nameAadd mainpadding ffffff border-r1 margin-top">
				<view class="name">77时尚精品酒店</view>
				<view class="address">北京市丰台区优橙色创新中心A座2021</view>
			</view> -->
			<view class="mainpadding ffffff border-r1 margin-top" v-for="(item) in dataAll.goods">
				<view class="add">{{item.tour_name}}</view>
				<view class="margin-top minute-box">
					<view class="img border-r2 margin-right">
						<image :src="item.images_text" mode=""></image>
					</view>
					<view class="minute flex1">
						<view class="">{{item.tour_ticket_name}}</view>
						<view class="pAc flexleft2">
							<text class="tMoney">￥{{item.tour_price}}</text>
							<text class="tCount">x{{item.total_num}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 核销码：-->
			<view class="mainpadding ffffff margin-top flexAll" v-if="dataAll.checkinfo==2" @click="lbtpriview">
				<view class="ma">
					<image :src="dataAll.qrcode_text" mode=""></image>
				</view>
				<view class="it2">核销码</view>
			</view>
			<!-- 订单详细信息：-->
			<view class="detailInfo mainpadding margin-top ffffff border-r1">
				<view class="flexleft2">
					<view class="it2">订单编号</view>
					<view class="it">{{dataAll.order_no}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">商品总价</view>
					<view class="it">￥{{dataAll.total_price}}</view>
				</view>
				<view class="flexleft2 margin-top" v-if="dataAll.score!==0">
					<view class="it2">积分抵扣</view>
					<!-- <view class="it">￥{{allowscorePrice}}</view> -->
					<view class="it">￥{{dataAll.favourable_price}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">实际支付</view>
					<view class="it">￥{{dataAll.pay_price}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">联系人</view>
					<view class="it">{{dataAll.username}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">联系电话</view>
					<view class="it">{{dataAll.mobile}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">创建时间</view>
					<view class="it">{{dataAll.createtime_text}}</view>
				</view>
			</view>
		</view>
		<!-- 按钮： -->
		<view class="btn-box flexleft ffffff mainpadding">
			<view class="quxiao" v-show="dataAll.checkinfo==1||dataAll.checkinfo==2"
				@click.stop="cancelorder(dataAll.id)">取消</view>
			<view class="zhifu" v-show="dataAll.checkinfo==1" @click.stop="atoncepay(dataAll)">立即支付</view>
			<view class="shanchu" v-show="dataAll.checkinfo==3||dataAll.checkinfo=='-1'"
				@click.stop="delorder(dataAll.id)">删除订单</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				allowscorePrice:'',// 积分抵扣金额
				
				show:false,
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		methods: {
			// 预览图片
			lbtpriview() {
				var i = [this.dataAll.qrcode_text]//获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 删除订单
			delorder(id) {
				httpRequest.modal('', '确认删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/tourorder/delOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						})
					}
				})
			},
			// 取消订单
			cancelorder(id) {
				httpRequest.modal('', '确认取消当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/tourorder/cancelOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							this.init()
						})
					}
				})
			},
			// 立即支付
			atoncepay(item) {
				let data = {
					id: item.id,
					pay_price: item.pay_price,
					allscore:item.allow_score
				}
				uni.navigateTo({
					url: '/pages/scenic/lijizf?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			init() {
				let _this = this;
				httpRequest.request('api/tourorder/detail', 'GET', {
					id: this.listid,
				}, false, false, false).then(res => {
					this.show=true
					if (res.code == 1) {
						this.dataAll = res.data
						this.$set(this.dataAll, "itemend", "")//itemend: "23小时41分钟" 实时更新
						this.dataAll.itemend = this.djstime(this.dataAll.expire_tme)
						setInterval(() => {
							this.dataAll.itemend = this.djstime(this.dataAll.expire_tme)
							console.log(this.dataAll.itemend)
						}, 1000)
						this.scoreToPrice(this.dataAll.allow_score)
					}
				}).catch(err => {
					this.show=true
					httpRequest.toast(err.msg);
				})
			},
			// 积分抵扣换算
			scoreToPrice(data){
				httpRequest.request('api/user/scoreToPrice', 'GET', {
					allow_score:data
				},false,false,false).then(res => {
					// console.log(res);
					this.allowscorePrice = res.data.price
				})
			},
			djstime(endTime) {
				let startTime = (Date.parse(new Date())) / 1000;
				var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				if (timestamp < startTime) {
					date1 = startTime;
				} else {
					date1 = timestamp; //开始时间
				}
				var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				if (hours < 10) {
					hours = "0" + hours
				}
				if (minutes < 10) {
					minutes = "0" + minutes
				}
				if (seconds < 10) {
					seconds = "0" + seconds
				}
				return hours + "小时" + minutes + "分钟"
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cF {
		// overflow: hidden;
	}

	.ticketDetailsTitle {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.surplusTime {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 7rpx;
	}

	.name {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.address {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 7rpx;
	}

	.add {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.minute-box {
		display: flex;
	}

	.img {
		width: 124rpx;
		height: 124rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.pAc {
		margin-top: 50rpx;
	}

	.tMoney {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.tCount {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.it {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.it2 {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.ma {
		width: 167rpx;
		height: 167rpx;
		margin-bottom: 9rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.btn-box {
		display: flex;
		flex-direction: row-reverse;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.quxiao {
		padding: 8rpx 30rpx;
		border: 2rpx solid #666666;
		border-radius: 30rpx;
		margin-right: 25rpx;
	}

	.zhifu {
		padding: 8rpx 30rpx;
		border-radius: 30rpx;
		margin-right: 25rpx;
		color: #00D2E1;
		border: 2rpx solid #00D2E1;
	}

	.shanchu {
		padding: 8rpx 30rpx;
		border: 2rpx solid #666666;
		border-radius: 30rpx;
		margin-right: 25rpx;
	}
</style>
